
class List {
    constructor() {
        // 获取元素
        this.number = document.querySelector('.banner>.right>a>.last>.number')
        this.tupian = document.querySelector('.xin_xian_hao_wu>.tu_pian')
        this.tupian2 = document.querySelector('.ren_qi_tui_jian>.tu_pian')
        this.span = document.querySelector('.floor>.cart>a')
        this.span0 = document.querySelector('.floor>.cart')
        // 楼层的购物车
        this.span1 = document.querySelector('.number')
        // console.log(this.tupian,this.span,this.number)
        // 初始化页面
        this.init()
        this.count()
    }
    init() {
        this.request()
        this.click()
    }
    // 购物车跳转
    click(){
        this.span0.onclick = ()=>{
            location.href = '../html/7-cart.html'
        }
    }
    // 发送请求
    request() {
        // 发送Ajax请求
        pAjax({ url: '../api/goods.json' })
            // 拿到数据
            .then((data) => {
                // console.log(data)
                let res = JSON.parse(data)  // JSON.parse() 方法将数据转换为 JS 对象
                // console.log(res)
                let data1 = res.slice(0, 4)   // 数据太多，截取4条看看，并重新赋值给data
                let data2 = res.slice(4, 8)
                // console.log(data1,data2)

                // 传递数据
                this.render1(data1)
                this.render2(data2)
            })
    }
    // 渲染新鲜好物页面，需要拿到数据data1
    render1(data1) {
        // console.log(data1)     // 能够拿到数据
        data1.forEach((item) => {
            this.tupian.innerHTML += `
                <div>
                    <a href="../html/6-details.html?id=${item.goods_id}" style="text-decoration: none; color: black;">
                        <img src="${item.img_small_logo}" alt="">
                    </a>
                    <h1 class="title hide">${item.title}</h1>
                    <p class="price">￥${item.price}</p>
                    <button data-id=${item.goods_id}>加入购物车</button>
                </div>
            `
        })
        // 传递参数
        this.addEvent1(data1)
    }
    // 绑定事件，这里因为按钮太多，所以用事件委派方便
    addEvent1(data1) {
        this.tupian.onclick = (e) => {
            let target = e.target || e.srcElement
            // 利用节点名称找到点击的按钮
            if (target.nodeName == 'BUTTON') {
                // alert(111)
                // 因为按钮设置了自定义属性，获取自定义属性     dataset.自定义属性名
                let id = target.dataset.id - 0
                // console.log(id)
                // 获取id对应的数据
                let goods = data1.find((item) => { return item.goods_id == id })
                // console.log(goods)

                // 先要查看购物车有没有数据
                let list = JSON.parse(localStorage.getItem('cart')) || []
                // 如果进来，代表购物车没有数据
                if (!list.length) {
                    // 把数据添加进购物车
                    list.push(goods)
                    // 并把商品计数
                    goods.cart_number = 1
                } else {
                    // 如果进来这里就代表购物车有数据，这时候就需要判断是否与点击添加的数据有相同
                    let res = list.some((item) => { return item.goods_id == id })
                    // 如果res为真，代表添加的商品数据有相同，那么就需要把添加的商品计数 ++
                    if (res) {
                        let index = list.findIndex((item) => { return item.goods_id == id })
                        list[index].cart_number++
                    } else {    // 否则就是添加商品在购物车没有重复的，就需要把商品加入购物车，并计数
                        // 把数据添加进购物车
                        list.push(goods)
                        // 并把商品计数
                        goods.cart_number = 1
                    }
                }
                // 把添加的商品存入内存
                localStorage.setItem('cart', JSON.stringify(list))
                // 点击的时候也需要计算
                this.count()
            }
        }
    }
    // 渲染人气推荐页面，需要拿到数据data2
    render2(data2) {
        // console.log(data1)     // 能够拿到数据
        data2.forEach((item) => {
            this.tupian2.innerHTML += `
                <div>
                    <a href="../html/6-details.html?id=${item.goods_id}" style="text-decoration: none; color: black;">
                        <img src="${item.img_small_logo}" alt="">
                    </a>
                    <h1 class="title hide">${item.title}</h1>
                    <p class="price">￥${item.price}</p>
                    <button data-id=${item.goods_id}>加入购物车</button>
                </div>
            `
        })
        // 传递参数
        this.addEvent2(data2)
    }
    // 绑定事件，这里因为按钮太多，所以用事件委派方便
    addEvent2(data2) {
        this.tupian2.onclick = (e) => {
            let target = e.target || e.srcElement
            // 利用节点名称找到点击的按钮
            if (target.nodeName == 'BUTTON') {
                // alert(111)
                // 因为按钮设置了自定义属性，获取自定义属性     dataset.自定义属性名
                let id = target.dataset.id - 0
                // console.log(id)
                // 获取id对应的数据
                let goods = data2.find((item) => { return item.goods_id == id })
                // console.log(goods)

                // 先要查看购物车有没有数据
                let list = JSON.parse(localStorage.getItem('cart')) || []
                // 如果进来，代表购物车没有数据
                if (!list.length) {
                    // 把数据添加进购物车
                    list.push(goods)
                    // 并把商品计数
                    goods.cart_number = 1
                } else {
                    // 如果进来这里就代表购物车有数据，这时候就需要判断是否与点击添加的数据有相同
                    let res = list.some((item) => { return item.goods_id == id })
                    // 如果res为真，代表添加的商品数据有相同，那么就需要把添加的商品计数 ++
                    if (res) {
                        let index = list.findIndex((item) => { return item.goods_id == id })
                        list[index].cart_number++
                    } else {    // 否则就是添加商品在购物车没有重复的，就需要把商品加入购物车，并计数
                        // 把数据添加进购物车
                        list.push(goods)
                        // 并把商品计数
                        goods.cart_number = 1
                    }
                }
                // 把添加的商品存入内存
                localStorage.setItem('cart', JSON.stringify(list))
                // 点击的时候也需要计算
                this.count()
            }
        }
    }
    // 计算数量
    count() {
        // 首先查看购物车里面有没有数据
        let list = JSON.parse(localStorage.getItem('cart')) || []
        // 变量初始化
        let num = 0
        list.forEach(item => { num += item.cart_number })
        this.span.innerHTML = num
        this.span1.innerHTML = num
    }
}
new List()